<template>
  <div>
    <el-dialog
      title="宣传人列表"
      :visible.sync="dialogvisible"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="true"
      width="60%"
      :before-close="handleClose"
    >
      <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
        <el-form-item label="时间范围:" prop="timespan">
          <el-date-picker
            v-model="queryParam.timespan"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否购买" prop="isBuy">
          <el-select v-model="queryParam.isBuy" placeholder="请选择" clearable>
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button type="primary" @click="resetForm('queryParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12">
          <label>总宣传人数：</label>
          {{total}}
        </el-col>
        <el-col :span="12">
          <label>购买人数：</label>
          {{buyNum}}
        </el-col>
      </el-row>
      <div class="tableList">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="排序" width="50"></el-table-column>
          <el-table-column prop="photoUrl" label="头像" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.photoUrl" width="80" height="80" />
            </template>
          </el-table-column>
          <el-table-column prop="id" label="宣传人Id" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recommenderDate" label="介绍日期" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="allTotal" label="累计消费" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="memberLevel" label="会员等级" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="isOrdered" label="是否购买" width="100" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.isOrdered?'是':'否'}}</template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["visible"],
  watch: {
    visible: function() {
      let that = this;
      that.dialogvisible = this.visible;
    }
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      dialogvisible: false,
      buyNum: 0,
      id: null,
      type: null,
      queryParam: {
        timespan: [],
        isBuy: null
      },
      sourceType: null
    };
  },
  created() {},
  computed: {},
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    initRecommender(id, type) {
      this.id = id;
      this.type = type;
      if (this.type === "doctor") {
        this.sourceType = 1;
      } else if (this.type === "store") {
        this.sourceType = 4;
      } else if (this.type === "checkactivity") {
        this.sourceType = 5;
      } else if (this.type === "distribute") {
        this.sourceType = 2;
      } else {
        this.sourceType = 3;
      }
      this.pageNum = 1; // 当前页数
      this.pageSize = 10;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      let url = "/customer/pageRecommender";
      if (this.type === "doctor") {
        url = "doctor/pageRecommender";
      }
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      this.$https
        .get(url, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: this.id,
          startDate: startDate,
          endDate: endDate,
          isBuy: this.queryParam.isBuy,
          sourceType: this.sourceType
        })
        .then(res => {
          this.list = res.data.data.list;
          // 自定义下标
          this.list.forEach((e, idx) => {
            e.idx = (idx + 1) * this.pageNum;
          });

          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
      this.countHasBuyRecommender();
    },
    handleClose(done) {
      this.$emit("update:visible", false);
      done();
    },
    countHasBuyRecommender() {
      let url = "/customer/countHasBuyRecommender";
      if (this.type === "doctor") {
        url = "/doctor/countHasBuyRecommender";
      }
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      this.$https
        .get(url, {
          id: this.id,
          startDate: startDate,
          endDate: endDate,
          sourceType: this.sourceType
        })
        .then(res => {
          this.buyNum = res.data.data;
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="less">
</style>